.sp-btn {
  display: inline-block;
  margin-bottom: 0;
  font-weight: 400;
  text-align: center;
  vertical-align: middle;
  touch-action: manipulation;
  cursor: pointer;
  background-image: none;
  border: 1px solid transparent;
  white-space: nowrap;
  user-select: none;
  //   padding: $btn-padding-base;
  font-size: $btn-font-size;
  height: 36px;
  line-height: 34px;
  .sp-loading {
    &__spinner {
      vertical-align: middle;
      margin-right: 2px;
      line-height: 1;
    }
  }
  &__large {
    padding: 10px 28px;
    .sp-btn__txt {
      font-size: 15px;
    }
  }
  // border-radius: $btn-border-radius;
  &:focus {
    outline: 0;
  }
  // &:after {
  //   height: 100%;
  //   content: "";
  //   visibility: hidden;
  //   display: inline-block;
  //   vertical-align: middle;
  //   line-height: normal;
  // }
  &.is-disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }
  &__default {
    color: $color-brand-primary;
    border-color: $color-brand-primary;
    background: #fff;
  }
  &__primary {
    color: #fff;
    border-color: $color-brand-primary;
    background: $color-brand-primary;
    .sp-loading {
      &__circular {
        stroke: #fff;
      }
    }
    .sp-btn__txt {
      color: $color-primary-text;
    }
  }
  &__warning {
    color: #fff;
    border-color: $color-invalid;
    background: $color-invalid;
    .sp-loading {
      &__circular {
        stroke: #fff;
      }
    }
  }
  &__text {
    padding: 0;
    background: transparent;
    display: inline-block;
    line-height: normal;
    vertical-align: middle;
  }
  &__long {
    width: 100%;
  }
}
